<template>
    <div>
        <h4>发表评论</h4>
        <textarea placeholder="bb模块（最多120字)" maxlength="120" v-model="postcom"></textarea>
        <mt-button type="primary" size="large" @click="postc">发表评论</mt-button>
        <div class="comment">
            <div class="com-item" v-for="(item,i) in mes" :key="item.add_time">
                <div class="item-title">
                    第{{i+1}}楼 用户:{{item.user_name}} 发表时间：{{item.add_time | timeFormat}}
                </div>
                <div class="item-body">
                    {{item.content}}
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain="" @click="getmore">加载更多</mt-button>
    </div>
</template>

<script>
    import { Toast} from "mint-ui"
    import axios from "axios"
    import qs from "Qs"
    export default {
        name: "comment",
        data(){
            return{
                mes:[],
                pageindex:1,
                postcom: ""
            }
        },
        props:["id"],
        methods:{
            getcomment(){
                axios.get("/api/getcomments/"+this.id+"?pageindex="+this.pageindex)
                    .then( data=>{
                        // console.log(data)
                        this.mes = this.mes.concat(data.data.message)
                    })
                    .catch( err=>{
                        console.log("获取失败")
                    })
            },
            getmore(){
                this.pageindex++
                this.getcomment()
            },
            postc(){
                if(this.postcom.length === 0){
                    return Toast("评论内容不能为空")
                }
                let data = {content: this.postcom}
                axios.post("api/postcomment/"+this.$route.params.id, qs.stringify(data))
                    .then(suc=>{
                        if(suc.data.status === 0){
                            // console.log(this.mes)
                            Toast("评论成功！")
                            let newdata = {
                                user_name: "我",
                                add_time: new Date(),
                                content: this.postcom
                            }
                            // console.log(this.res);
                            this.mes.unshift(newdata)
                            this.postcom = ""
                        }

                    })

            }
        },
        created(){
            this.getcomment();
        }
    }
</script>

<style scoped lang="less">
    textarea{
        font-size: 14px;
        margin: 0;
        height: 80px;
    }
    .comment{

        .com-item{
            margin: 4px 0;
            .item-title{
                font-size: 13px;
                background-color: #6d6d72;
                border-radius: 3px;
                line-height: 35px;
            }
            .item-body{
                font-size: 14px;
                line-height: 35px;
                text-indent: 2em;
            }
        }
    }
</style>